<template>
    <el-dialog title="理箱记录查看" :visible.sync="dialogForm" width="1100px">
        <el-form :inline="true" ref="form" :model="form" :rules="rules" class="search-form" label-width="100px"
                 style="position:relative">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="箱号：" prop="containerId">
                        {{ form.containerId }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="箱型：" prop="containerType">
                        {{ form.containerType }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="尺寸：" prop="containerSize">
                        {{ form.containerSize }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="空重：" prop="ef">
                        {{ form.ef | _filterIfHeavyType }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="铅封号：" prop="containerType">
                        {{ form.sealNo }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="内外贸：" prop="tradeType">
                        {{ form.tradeType | _filterTradeType }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="装箱方式：" prop="enchaseWay">
                        {{ form.enchaseWay | _filterEnchaseWayType }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="提单号：" prop="billNumber">
                        {{ form.billNumber }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="中转：" prop="change">
                        {{ form.change | _filterIsChange }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="船代：" prop="shipAgentName">
                        {{ form.shipAgentName }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="箱主：" prop="shipAgentName">
                        {{ form.containerOwnerName }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="作业港口：" prop="portCode">
                        {{ form.portName }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="理箱人：" prop="tallyClerk">
                        {{ form.tallyClerk }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="理箱时间：" prop="tallyTime">
                        {{ form.tallyTime }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="船名/航次：">
                        {{ form.shipName }}/{{form.voyage}}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="备注：" prop="remark" class="detail-form-lit">
                        {{ form.remark }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="是否残损：" prop="isDamaged">
                        {{ form.isDamaged | _filterTrueOrFalse }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-show="form.isDamaged">
                <el-col :span="8">
                    <el-form-item label="残损代码：" prop="" class="detail-form-lit">
                        <span v-for="item in form.damagedCode">{{ item | _filterDamaged }},</span>
                    </el-form-item>
                </el-col>
            </el-row>
            <!--damageSign 图片标记-->
            <el-row v-show="form.isDamaged">
                <el-col :span="8">
                    <el-form-item label="残损描述：" prop="damagedExplan" class="detail-form-lit">
                        {{ form.damagedExplan }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-show="form.isDamaged">
                <el-col :span="24">
                    <el-form-item label="残损照片：" prop="" class="detail-form-pic mt-20">
                        <attachments :isPreview="true" v-model="form.attachments" listType="picture-card"></attachments>
                    </el-form-item>
                </el-col>
            </el-row>
            <!--<el-button v-show="form.isDamaged" @click="clearSign" style="position: absolute;bottom:300px;right:585px">-->
            <!--清除标记-->
            <!--</el-button>-->
            <div id="damage" v-show="form.isDamaged">
                <img v-if="!form.damageSign" src="../../../assets/img/u92.png" alt="" style="width: 100%">
                <img v-if="form.damageSign" :src="url" alt="" style="width: 100%">
                <!--<i v-for="item in map" :style="'top:'+item.y+'px;left:'+item.x+'px'" class="el-icon-location"-->
                <!--style="color: red;position:absolute;font-size: 30px"></i>-->
            </div>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogForm = false">关 闭</el-button>
        </span>
    </el-dialog>
</template>

<script>
    import attachments from '@/components/file-upload'
    import { getTallyRecord } from "@/api/shipPlan/shipPlan";
    import { preview } from "@/api/attachment/attachment";

    export default {
        name: "recordDetail",
        components: {
            attachments,
        },
        data() {
            return {
                dialogForm: false,
                form: {},
                rules: {},
                map: [],
                loading: false,
                url: ''
            }
        },
        methods: {
            loadData(id) {
                getTallyRecord(id).then(res => {
                    this.form = res.data
                    this.form.damagedCode = res.data.damagedCode ? res.data.damagedCode.split(',') : []
                    if (res.data.damageSign) {
                        preview(res.data.damageSign[0].id).then(response => {
                            let url = response.data
                            let strUrl = response.data.substr(0, url.length - 2)
                            this.url = strUrl.substr(url.indexOf('=') + 1, strUrl.length)
                        })
                    }
                    this.dialogForm = true
                })
            }
        },
        watch:{
            dialogForm(bool){
                if(!bool){
                    this.$emit('close')
                }
            }
        }
    }
</script>

<style scoped>
    #damage {
        position: absolute;
        left: 370px;
        top: 250px;
        width: 500px;
    }
</style>
